<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础使用</title>
    <script src="/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>天气: {{weather}}</h2>
      <button @click="changeWeather">点击</button>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: "#app",
        data: {
          isHost: true,
        },
        methods: {
          changeWeather() {
            this.isHost = !this.isHost;
          },
        },
        computed: {
          weather() {
            return this.isHost ? "炎热" : "凉爽";
          },
        },
        watch: {
          isHost: {
            immediate: true, // 初始化调用一下 handler
            // isHost 发生改变时调用
            handler(newValue, oldvalue) {
              console.log(newValue, oldvalue);
            },
          },
        },
      });

      // vm.$watch('isHost', {
      //     immediate: true,  // 初始化调用一下 handler
      //     // isHost 发生改变时调用
      //     handler(newValue,oldvalue) {
      //         console.log(newValue, oldvalue)
      //     }
      // }, {deep: true})
    </script>
  </body>
</html>
